Skip to content

Exercises

Search Form

In this exercise, we'll build an inline search form:

Mockup of the final product

Below, you'll find the raw HTML code that produces the UI we want. Your job is to convert it to JSX, so that it can be used in React.

Acceptance Criteria:

  • The UI should match the screenshot above.
  • No errors should be shown in the Result pane.
  • No warnings should be logged in the Console pane.
    • Note: the console isn't cleared automatically when the warnings are fixed. You can refresh the Preview pane with the  icon.

Code Playground

import React from 'react';
import { createRoot } from 'react-dom/client';

const element = (
<form>
{/* Stuff here */}
</form>
);

/*
Here's the raw HTML:

<form>
<label for="search-input">Search:</label>
<input id="search-input">
<button aria-label="Submit" class="submit-btn">
<img
alt=""
src="https://sandpack-bundler.vercel.app/img/arrow-right.svg"
>
</button>
</form>
*/

const container = document.querySelector('#root');
const root = createRoot(container);
root.render(element);
preview
console

Solution:

Critter

Let's build a Twitter/Animal-Crossing hybrid! A social network for animals called Critter.

Specifically, we'll be implementing the following UI:

Mockup of the final product

To help, you've been given two things:

  1. A message object, containing all the data you'll need to populate the UI
  2. A chunk of HTML, which needs to be converted to JSX, so it can be rendered by React.

Acceptance Criteria:

  • The UI should match the mockup, using the data from the message object
  • The data should be referenced using expression slots. Instead of copy/pasting the data into the JSX, we should access it from the message object, like message.content.
  • The user's name should be a link, and it should link to /users/[handle]. With this particular data, it should be /users/benjaminthorn.
    • There is no actual "profile page", and so the link won't resolve to anything. That's alright.
  • The avatar image should use the author's avatarDescription for the alt text.
  • For the timestamp in the footer, use the provided formatDate function. Pass in the message.published to get a nicely-formatted timestamp.

Code Playground

import React from 'react';
import { createRoot } from 'react-dom/client';

import { formatDate } from './date-helpers.js';

const message = {
content:
'Just ate at “Les Corbeaux En Colère”. Wonderful little venue!',
published: '2024-03-14T15:09:26.000Z',
author: {
avatarSrc: 'https://sandpack-bundler.vercel.app/img/avatars/009.png',
avatarDescription: 'Cartoon bear',
name: 'Ben Thorn',
handle: 'benjaminthorn',
}
};

const element = (
<article>
{/*
TODO: Stuff here!
*/}
</article>
);

/*
Here's the raw HTML:

<article style="filter: var(--shadow-elevation-high)">
<header>
<img src="TODO">
<a href="">Author name here</a>
</header>
<p>
Message content here
</p>
<footer>
Posted
<time datetime="2024-01-01T00:00:00.000Z">
January 1st at 12:00am
</time>
</footer>
</article>
*/

const container = document.querySelector('#root');
const root = createRoot(container);
root.render(element);
preview
console

Solution:

This solution uses string interpolation with template strings. Check out the JS Primer lesson on string interpolation 👀 if you're not familiar with this syntax.